<template>
  <div class="discount-code">
    <popup  :isShow.sync="showCouponPop"
            title="供应商优惠"
            @confirm="confirm"
            @cancel="cancel">
      <template slot="content">
        <div class="coupon-lists-box">
          <van-radio-group v-model="radio" checked-color="#F21228">
            <van-cell-group>
              <van-cell v-for="(item,index) in couponLists" :key="index" clickable @click="radio = item.user_coupon_id">
              <template slot="title">
                {{item.title}}
                <span style="color:#F21228;"> {{item.promotion_type==1?item.value_zk+'折':'¥'+item.value}} </span>
              </template>
                <template slot="right-icon">
                  <van-radio :name="item.user_coupon_id" />
                </template>
              </van-cell>
              <van-cell title="不使用优惠" clickable @click="radio = '-1'">
                <template slot="right-icon">
                  <van-radio name="-1" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
      </template>
    </popup>
  </div>
</template>

<script>
import Vue from 'vue'
import popup from '@/components/popup'
import { Cell, CellGroup } from 'vant'
import { RadioGroup, Radio } from 'vant'

Vue.use(Radio).use(RadioGroup)
Vue.use(Cell).use(CellGroup)
export default Vue.extend({
  components: {
    popup
  },
  props: {
    userCouponId: {
      type: String,
      default: '-1'
    },
    couponLists: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      showCouponPop: false,
      radio: -1
    }
  },
  mounted() {
    this.radio = this.userCouponId
  },
  methods: {
    confirm() {
      this.$parent.formData.user_sup_coupon_id = this.radio
      this.$parent.is_use_coupons = true
    },
    cancel() {
      this.radio = this.userCouponId
    }
  }
})
</script>

<style lang="scss">
.coupon-lists-box{
  padding: 0 0 50px 0;
  .van-cell-group{
    &::after{
      border: 0;
    }
    
  }
}
</style>